<template>
  <div>
      <Header></Header>
      <div class="top">
          <div class="container clearfix">
              <div class="logo leftfix">
                  <img src="../assets/logo.png" width="150" height="150">
              </div>
              <div class="el-conponent rightfix">
                  <el-steps :active="2" align-center  style="margin-top: 30px">
                      <el-step title="我的购物车"></el-step>
                      <el-step title="确认订单"></el-step>
                      <el-step title="支付提交"></el-step>
                      <el-step title="订单完成"></el-step>
                  </el-steps>
              </div>
          </div>
      </div>
      <div class="main">
          <div class="container clearfix">
              <h2 style="margin: 10px 0">我的购物车</h2>

              <table border="0" cellspacing = "1" >
                  <thead style="background-color: #eeeeee;">
                  <tr>
                      <th width = "75px" height = "42px">
                          <label for="checkall">
                              <input type="checkbox" checked name="checkall" id="checkall" class="checkall" style="margin-left: 8px;margin-right: 5px;margin-top: 6px">
                              <span style="line-height: 42px">全选</span>
                          </label>
                      </th>
                      <th width = "400px" height = "42px">商品</th>
                      <th width = "135px" height = "42px">单价</th>
                      <th width = "230px" height = "42px">购买数量</th>
                      <th width = "150px" height = "42px">小计</th>
                      <th width = "200px" height = "42px">操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr style="height: 90px;line-height: 90px;border:1px solid #eee ">
                      <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                          <label for="checkall1" class="leftfix" style="padding: 0 20px;line-height: 90px" >
                              <input type="checkbox" name="checkall" id="checkall1" class="checkall">
                          </label>
                          <img  src="../assets/logo.png" width="40" height="40" alt="cosmetics" class ="cartimg leftfix" >
                          <div class="cartname leftfix">
                              Texamo黛末烁影系列
                          </div>
                          <div style="clear: both;"></div>
                      </td>
                      <td width = "135px" height = "90px" align="center" valign="top" >￥109.00</td>
                      <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                          <div class="numbersitem">
                              <span @click="numbersChange('reduce')">-</span>
                              <input type="number" :value="numbers">
                              <span @click="numbersChange('add')">+</span>
                          </div>

                      </td>
                      <td width = "150px" height = "90px" align="center" valign="top" class="price">￥318.00</td>
                      <td width = "115px" height = "90px" align="left" valign="top" class="cartend">
                          <strong>删除</strong><br>
                      </td>
                  </tr>
                  <tr style="height: 90px;line-height: 90px;border:1px solid #eee ">
                      <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                          <label for="checkall1" class="leftfix" style="padding: 0 20px;line-height: 90px" >
                              <input type="checkbox" name="checkall" id="checkall1" class="checkall">
                          </label>
                          <img  src="../assets/logo.png" width="40" height="40" alt="cosmetics" class ="cartimg leftfix" >
                          <div class="cartname leftfix">
                              Texamo黛末烁影系列
                          </div>
                          <div style="clear: both;"></div>
                      </td>
                      <td width = "135px" height = "90px" align="center" valign="top" >￥109.00</td>
                      <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                          <div class="numbersitem">
                              <span @click="numbersChange('reduce')">-</span>
                              <input type="number" :value="numbers">
                              <span @click="numbersChange('add')">+</span>
                          </div>

                      </td>
                      <td width = "150px" height = "90px" align="center" valign="top" class="price">￥318.00</td>
                      <td width = "115px" height = "90px" align="left" valign="top" class="cartend">
                          <strong>删除</strong><br>
                      </td>
                  </tr>
                  <tr style="height: 90px;line-height: 90px;border:1px solid #eee ">
                      <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                          <label for="checkall1" class="leftfix" style="padding: 0 20px;line-height: 90px" >
                              <input type="checkbox" name="checkall" id="checkall1" class="checkall">
                          </label>
                          <img  src="../assets/logo.png" width="40" height="40" alt="cosmetics" class ="cartimg leftfix" >
                          <div class="cartname leftfix">
                              Texamo黛末烁影系列
                          </div>
                          <div style="clear: both;"></div>
                      </td>
                      <td width = "135px" height = "90px" align="center" valign="top" >￥109.00</td>
                      <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                          <div class="numbersitem">
                              <span @click="numbersChange('reduce')">-</span>
                              <input type="number" :value="numbers">
                              <span @click="numbersChange('add')">+</span>
                          </div>

                      </td>
                      <td width = "150px" height = "90px" align="center" valign="top" class="price">￥318.00</td>
                      <td width = "115px" height = "90px" align="left" valign="top" class="cartend">
                          <strong>删除</strong><br>
                      </td>
                  </tr>
                  <tr style="height: 300px;border: 1px solid #eee">
                    213
                  </tr>
                  </tbody>
              </table>


          </div>
      </div>
      <Bottom class="clearfix"></Bottom>



  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Bottom from "@/components/Bottom.vue"
export default {
    name: "MyCart",
    components:{
        Header,Bottom
    },
    data(){
        return{
            numbers:1,
            tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-08',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-06',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-07',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            multipleSelection: []
        }
        },
    methods:{

            numbersChange(val){
                if(val==='add'){
                    this.numbers++;
                }else{
                    if(this.numbers>1){
                        this.numbers--;
                    }
                }
            },addCart(){
                alert('加入购物车成功！')
            },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }

}
</script>

<style>
table{
    border-collapse:collapse;
}
.checkall{
    width: 15px;

}
.numbersitem > span,input{
    width: 30px;
    height: 30px;
    text-align: center;
    font-weight: bold;
}
.numbersitem span{
    margin: 0 10px;
    line-height: 90px;
    font-size: 25px;
    user-select: none;
}

.numbersitem span:hover{
    color: #DD302D;
}


.top{
    height: 150px;
    border-bottom: 1px solid #eee;
}
.el-conponent{
    width: 400px;
}
.main{
    color: #555;
}

.cartend{
    text-align: center;
}
.cartimg{
    margin-top: 25px;
    margin-left: 25px;
}
.cartname{
    line-height: 90px;
    margin-left: 20px;
}
.price{
    color: orange;
}


</style>
<!--              <el-table-->
<!--                  ref="multipleTable"-->
<!--                  border-->
<!--                  :data="tableData"-->
<!--                  tooltip-effect="dark"-->
<!--                  style="width: 100%"-->
<!--                  @selection-change="handleSelectionChange">-->
<!--                  <el-table-column-->
<!--                      type="selection"-->
<!--                      width="60">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      label="商品"-->
<!--                      >-->
<!--                      <template slot-scope="scope">{{ scope.row.date }}</template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="name"-->
<!--                      label="单价（元）"-->
<!--                      width="70">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="address"-->
<!--                      label="数量"-->
<!--                      width="120"-->
<!--                      show-overflow-tooltip>-->
<!--                      <el-button>-</el-button>-->
<!--                     123-->
<!--                      <el-button>+</el-button>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="address"-->
<!--                      label="小计（元）"-->
<!--                      width="70"-->
<!--                      show-overflow-tooltip>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="address"-->
<!--                      label="操作"-->
<!--                      width="92"-->
<!--                      show-overflow-tooltip>-->
<!--                      <template slot-scope="scope" >-->
<!--                          <el-button type="danger" slot="reference">删除</el-button>-->
<!--                      </template>-->
<!--                  </el-table-column>-->
<!--              </el-table>-->